<template>
  <div class="page-attribute">
    <div class="page-attribute-item page-attribute-info">
      <h3 class="title">
        {{
          operationSign === INDENTIFICATION.PAGE_MODAL ||
          operationSign === INDENTIFICATION.PAGE_FORM_MODAL
            ? "页面"
            : "模块"
        }}设置
      </h3>
      <u-cell-group v-if="pageData" :border="false">
        <cus-cell :border="false">
          <div slot="title">
            {{ title }}
          </div>
          <div
            v-if="
              pageData.attribute && pageData.attribute.hasOwnProperty('title')
            "
          >
            <u--textarea
              autoHeight
              count
              class="u-slot-value"
              :placeholder="attributeTitlePlaceholder"
              border="surround"
              v-model="pageData.attribute.title"
              maxlength="30"
            ></u--textarea>
          </div>
        </cus-cell>

        <!--                <cus-cell title="字体大小" :border="false">-->
        <!--                  <div-->
        <!--                    -->
        <!--                    class="u-slot-title"-->
        <!--                    v-if="-->
        <!--                      pageData.attribute &&-->
        <!--                      pageData.attribute.hasOwnProperty('fontSize')-->
        <!--                    "-->
        <!--                  >-->
        <!--                    <u&#45;&#45;input-->
        <!--                      placeholder="请输入字体大小"-->
        <!--                      border="surround"-->
        <!--                      v-model="fontSize"-->
        <!--                      @blur="onInputFontSize"-->
        <!--                      type="number"-->
        <!--                      style="margin-right: 10px; padding: 0 8px; width: 320rpx"-->
        <!--                    ></u&#45;&#45;input>-->
        <!--                    <uni-data-select-->
        <!--                      v-if="-->
        <!--                        pageData.attribute &&-->
        <!--                        pageData.attribute.hasOwnProperty('fontSize')-->
        <!--                      "-->
        <!--                      v-model="fontSizeUnit"-->
        <!--                      :localdata="fontSizeUnitList"-->
        <!--                      :clear="false"-->
        <!--                      style="width: 0"-->
        <!--                      @change="onChangeFontSizeUnit"-->
        <!--                    ></uni-data-select>-->
        <!--                  </div>-->
        <!--                </cus-cell>-->

        <!--                <cus-cell title="字体颜色" :border="false">-->
        <!--                  <div-->
        <!--                    -->
        <!--                    class="u-slot-color"-->
        <!--                    v-if="pageData.style && pageData.style.hasOwnProperty('color')"-->
        <!--                  >-->
        <!--                    <div-->
        <!--                      @click="open('fontSizeColorPicker')"-->
        <!--                      class="color-box"-->
        <!--                      :style="{-->
        <!--                        backgroundColor: pageData.style.color,-->
        <!--                      }"-->
        <!--                    ></div>-->
        <!--                  </div>-->
        <!--                  <div slot="label" class="color-picker">-->
        <!--                    <div class="color-picker-container">-->
        <!--                      <t-color-picker-->
        <!--                        ref="fontSizeColorPicker"-->
        <!--                        :color="color"-->
        <!--                        @confirm="confirmFontColor"-->
        <!--                      ></t-color-picker>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                </cus-cell>-->

        <cus-cell title="背景颜色" :border="false" ref="uCellColorPicker">
          <div
            class="u-slot-color"
            v-if="
              pageData.style && pageData.style.hasOwnProperty('backgroundColor')
            "
          >
            <!--            <u-button @click="open" type="primary">重置</u-button>-->
            <div @click="resetColor" class="resetColor">重置</div>
            <div
              @click="open('colorPicker')"
              class="color-box"
              :style="{
                backgroundColor: pageData.style.backgroundColor,
              }"
            ></div>
          </div>
          <div class="color-picker">
            <div class="color-picker-container">
              <t-color-picker
                ref="colorPicker"
                :color="color"
                @confirm="confirm"
              ></t-color-picker>
            </div>
          </div>
        </cus-cell>
        <cus-cell title="背景底图" :border="false">
          <div
            class="u-slot-upload"
            v-if="
              pageData.style && pageData.style.hasOwnProperty('backgroundImage')
            "
          >
            <u-upload
              class="upload-picker"
              :fileList="fileList"
              name="1"
              @afterRead="onUploadAfterRead"
              :maxSzie="10485760"
              :previewImage="true"
              :maxCount="1"
              width="6rem"
              height="6rem"
              @delete="onDeletePic"
            />

            <!--            <u-icon-->
            <!--              name="close-circle-fill"-->
            <!--              size="20"-->
            <!--              @click="onDeletePic"-->
            <!--              class="upload-close"-->
            <!--              v-if="fileList.length > 0"-->
            <!--            />-->
            <!--            <u-upload-->
            <!--              class="upload-picker"-->
            <!--              :fileList="fileList"-->
            <!--              name="1"-->
            <!--              :maxSize="1024000"-->
            <!--              @afterRead="onUploadAfterRead"-->
            <!--              :previewImage="true"-->
            <!--              width="100%"-->
            <!--              height="100%"-->
            <!--            >-->
            <!--              <u-image-->
            <!--                :src="fileList[0].url"-->
            <!--                v-if="fileList.length > 0"-->
            <!--                width="6rem"-->
            <!--                height="6rem"-->
            <!--              />-->
            <!--            </u-upload>-->
            <!--            <text class="">大小1m内支持使用png、jpg、gif格式</text>-->
          </div>
        </cus-cell>
        <cus-cell
          title="背景宽度"
          :border="false"
          v-if="
            pageData.style && pageData.style.hasOwnProperty('backgroundSize')
          "
        >
          <div class="u-slot-slider">
            <u-slider
              v-model="backgroundSizeWidth"
              @changing="onChangeBackgroundSize('width')"
            />
          </div>
        </cus-cell>
        <cus-cell
          title="背景高度"
          :border="false"
          v-if="
            pageData.style && pageData.style.hasOwnProperty('backgroundSize')
          "
        >
          <div class="u-slot-slider">
            <u-slider
              v-model="backgroundSizeHeight"
              @changing="onChangeBackgroundSize('height')"
            />
          </div>
        </cus-cell>
        <cus-cell title="背景重复" :border="false">
          <div
            class="u-slot-repeat"
            v-if="
              pageData.style &&
              pageData.style.hasOwnProperty('backgroundRepeat')
            "
          >
            <u-radio-group
              v-model="pageData.style.backgroundRepeat"
              placement="row"
              :activeColor="$theme.themeColor.primary"
            >
              <u-radio
                :customStyle="{ marginRight: 'auto', marginTop: '8px' }"
                v-for="(item, index) in repeatList"
                :key="index"
                :label="item.name"
                :name="item.value"
                size="1rem"
              >
              </u-radio>
            </u-radio-group>
          </div>
        </cus-cell>
      </u-cell-group>
    </div>

    <div
      class="page-attribute-item"
      v-if="
        operationSign === INDENTIFICATION.PAGE_FORM_MODAL &&
        pageData.attribute &&
        pageData.attribute.hasOwnProperty('desc')
      "
    >
      <u-cell-group title="表单描述" :border="false">
        <div class="cell__body">
          <u--textarea
            v-model="pageData.attribute.desc"
            placeholder="请输入表单描述"
            autoHeight
            :maxlength="100"
            count
            border="false"
          />

          <!--          <textarea-->
          <!--            v-model="pageData.attribute.desc"-->
          <!--            placeholder="请输入内容"-->
          <!--            :maxlength="100"-->
          <!--          />-->
          <!--          <div class="tips">{{ pageData.attribute.desc.length }}/100</div>-->
        </div>
      </u-cell-group>
    </div>
  </div>
</template>

<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
import { INDENTIFICATION } from "@/const/widget";
import { uploadImage } from "@/service/api/base";

export default {
  components: {
    tColorPicker,
  },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    operationSign() {
      return this.$route.query.sign;
    },
    pageId({ pageData }) {
      return pageData?.page_id;
    },
    title({ operationSign }) {
      return operationSign === INDENTIFICATION.PAGE_MODAL ||
        operationSign === INDENTIFICATION.PAGE_FORM_MODAL
        ? "页面标题"
        : "模块名称";
    },
    attributeTitlePlaceholder({ operationSign }) {
      return operationSign === INDENTIFICATION.PAGE_MODAL ||
        operationSign === INDENTIFICATION.PAGE_FORM_MODAL
        ? "请输入页面标题"
        : "请输入模块名称";
    },
  },
  watch: {
    pageId() {
      this.initPageData();
    },
  },
  name: "pageAttribute",
  data() {
    return {
      INDENTIFICATION,
      fileList: [],
      color: {},
      originalColor: "",
      backgroundSizeWidth: 0,
      backgroundSizeHeight: 0,
      repeatList: [
        {
          name: "重复",
          value: "repeat",
        },
        {
          name: "水平重复",
          value: "repeat-x",
        },
        {
          name: "垂直重复",
          value: "repeat-y",
        },
        {
          name: "不重复",
          value: "no-repeat",
        },
      ],
      fontSizeUnit: "rpx",
      fontSizeUnitList: [
        { value: "rpx", text: "rpx" },
        { value: "px", text: "px" },
        { value: "rem", text: "rem" },
        { value: "em", text: "em" },
        { value: "vw", text: "vw" },
        { value: "vh", text: "vh" },
      ],
      fontSize: 0,
    };
  },
  created() {},
  mounted() {
    this.initPageData();
  },
  methods: {
    handleBackgroundColor() {
      //颜色处理
      const color = this.pageData?.style?.backgroundColor
        .replace("rgba", "")
        .replace("(", "")
        .replace(")", "")
        .split(",");
      const colorObject = Object.assign(
        {},
        {
          r: color[0] || 0,
          g: color[1] || 0,
          b: color[2] || 0,
          a: color[3] || 1,
        }
      );
      this.color = colorObject;
      // console.log("颜色处理====", colorObject, this.color);
      this.originalColor = this.color;
    },
    handleBackgroundSize() {
      if (this.pageData.style.backgroundSize === "auto") {
        this.backgroundSizeWidth = 0;
        this.backgroundSizeHeight = 0;
        return;
      }
      //底图宽高处理
      const backgroundSize = this.pageData.style.backgroundSize.split(" ");
      this.backgroundSizeWidth = backgroundSize[0].replace("%", "");
      this.backgroundSizeHeight = backgroundSize[0].replace("%", "");
    },
    handleBackgroundImage() {
      const backgroundImage = this.pageData.style.backgroundImage
        .replace("url(", "")
        .replace(")", "");
      this.fileList.splice(1, 0, {
        status: "success",
        message: "",
        url: backgroundImage,
      });
    },
    handleFontSize() {
      //字体
      this.fontSize = Number(
        this.pageData.style.fontSize
          .replace("rpx", "")
          .replace("px", "")
          .replace("rem", "")
          .replace("em", "")
          .replace("vh", "")
          .replace("vw", "")
      );
      // console.log("字体", this.fontSize);
    },
    initPageData() {
      if (this.pageData) {
        if (this.pageData?.style?.backgroundColor) {
          this.handleBackgroundColor();
        }
        if (this.pageData?.style?.backgroundSize) {
          this.handleBackgroundSize();
        }
        if (this.pageData?.style?.backgroundImage) {
          this.handleBackgroundImage();
        }
        if (this.pageData?.style?.fontSize) {
          this.handleFontSize();
        }
      }
    },
    //---- 背景颜色选择器 start----
    open(ref) {
      console.log("背景颜色选择器", this.$refs.uCellColorPicker);
      // 打开颜色选择器
      this.$refs[ref].open();
    },
    resetColor() {
      this.color = {
        r: 255,
        g: 255,
        b: 255,
        a: 1,
      };
      this.originalColor = this.color;
      const rgba = this.originalColor;
      this.pageData.style.backgroundColor = `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;
    },
    confirm(e) {
      const { rgba } = e;
      this.color = rgba;
      this.pageData.style.backgroundColor = `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;
      console.log("颜色选择器返回值：", e, this.pageData.style.backgroundColor);
    },

    //----背景颜色选择器 end----
    //----字体 start----
    onInputFontSize(e) {
      uni.$u.throttle(() => {
        this.pageData.style.fontSize = Number(e) + this.fontSizeUnit;
      }, 1500);
    },
    confirmFontColor(e) {
      const { hex } = e;
      this.pageData.style.color = hex;
    },
    onChangeFontSizeUnit(e) {
      const fontSize = Number(
        this.pageData.style.fontSize
          .replace("rpx", "")
          .replace("px", "")
          .replace("rem", "")
          .replace("em", "")
          .replace("vh", "")
          .replace("vw", "")
      );
      this.pageData.style.fontSize = Number(fontSize) + e;
    },
    //----字体 end----
    //----上传图片 start----
    async onUploadAfterRead(e) {
      if (e.file.size > 2097152) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `禁止上传超过2m的图片`,
        });
      }
      const url = e.file.url;
      const res = await this.uploadFilePromise(url);
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${res ? "成功" : "失败"}`,
      });
      // uni.showToast({ title: `上传${res ? "成功" : "失败"}` });
      console.log(e);
    },
    onDeletePic() {
      this.fileList = [];
      this.pageData.style.backgroundImage = "";
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uploadImage(url).then((res) => {
          const url = res.baseUrl + res.path;
          this.fileList.splice(0, 0, {
            status: "success",
            message: "",
            url,
          });
          this.pageData.style.backgroundImage = `url(${url})`;
          this.pageData.style.backgroundSize = "auto";
          console.log("=====", url);
          res ? resolve(true) : reject(false);
        });
      });
    },
    //----上传图片 end----

    //----背景高度 start----
    onChangeBackgroundSize() {
      if (this.backgroundSizeWidth === 0 && this.backgroundSizeHeight === 0) {
        return (this.pageData.style.backgroundSize = "auto");
      }
      if (this.backgroundSizeWidth === 0) {
        return (this.pageData.style.backgroundSize = `auto ${this.backgroundSizeHeight}%`);
      }
      if (this.backgroundSizeHeight === 0) {
        return (this.pageData.style.backgroundSize = `${this.backgroundSizeWidth}% auto`);
      }
      this.pageData.style.backgroundSize = `${this.backgroundSizeWidth}% ${this.backgroundSizeHeight}%`;
    },
    //----背景高度 end----
  },
};
</script>

<style scoped lang="scss">
::v-deep.u-textarea {
  width: 400px !important;
}
.page-attribute {
  background-color: white;
  &-item {
    width: 90%;
    margin: 20px auto 0 auto;
    padding: 10px;
    border-radius: 6px;
    background-color: white;
  }
  .cell__body {
    position: relative;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 10px 15px;
    font-size: 15px;
    color: #303133;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 8px;
  }
  &-info {
    .title {
    }
    .u-slot-title {
      display: flex;
    }
    .u-slot-color {
      display: flex;
      align-items: center;
    }
    .color-box {
      margin-left: 10px;
      width: 100px;
      height: 35px;
      border: 1px solid lightgray;
    }
    .color-picker {
      position: absolute;
      &-container {
        position: absolute;
        top: 20px;
        //left: -15px;
        z-index: 9999;
      }
    }
    .u-slot-upload {
      width: 6rem;
      height: 6rem;
      position: relative;
      .upload-picker {
        width: 100%;
        height: 100%;
      }
      .upload-close {
        position: absolute;
        right: -0.5rem;
        top: 0;
        z-index: 1;
      }
    }
    .u-slot-slider,
    .u-slot-repeat {
      width: 100%;
    }
  }
}
</style>
